<template>
    <div class="collection">
        <header>
            <i class="iconfont icon-fanhui1" @click="$router.back()"></i>
            <p>我的收藏</p>
            <i class="iconfont icon-24gf-branches"></i>
        </header>
        <div data-v-9992bdc4="" class="content">
            <div data-v-9992bdc4="" slot="item" class="item" v-for="(item,index) in list" :key="index">
                <div data-v-9992bdc4="" class="collect-icon"></div>
                <div data-v-9992bdc4="" class="top">
                    <p data-v-9992bdc4="" class="title">{{item.title}}</p>
                    <p data-v-9992bdc4="" class="time"><span data-v-9992bdc4="" class="duration"><img data-v-9992bdc4=""
                                src=""
                                alt="" class="clock"><span data-v-9992bdc4="">07月08日 00:00 ~ 07月09日
                                00:00</span></span><span data-v-9992bdc4="">共1课时</span></p>
                    <ul data-v-9992bdc4="" class="teachers">
                        <li data-v-9992bdc4=""><img data-v-9992bdc4=""
                                :src="item.teachersAvatar"><span
                                data-v-9992bdc4="">{{item.teachers}}</span></li>
                    </ul>
                </div>
                <div data-v-9992bdc4="" class="bottom">
                    <div data-v-9992bdc4="" class="info">
                        <p data-v-9992bdc4="" class="sign">{{item.sales_num}}人已报名</p>
                        <div data-v-9992bdc4="" class="price">
                            <!---->
                            <p data-v-9992bdc4="" class="price-now"><i data-v-9992bdc4=""
                                    class="iconfont icon-jinbi"></i> 0 </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {collections} from "../request/http"
    export default{
        data() {
            return {
                page:{
                    page:1,
                    limit:10,
                    type:1
                },
                list:[]
            }
        },
        created() {
            collections(this.page).then(res=>{
                console.log(res);
                this.list = res.list
            })
        },
    }
</script>


<style lang="scss" scoped>
header {
    background-color: #fff;
    height: 100px;
    display: flex;
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #cccc;

    i {
        color: blue;
    }


    p {
        font-size: 30px;

    }
}

.content {
    padding: 0.4rem 0.267rem;
}
.item {
    background-color: #fff;
    padding: 0.267rem;
    margin-bottom: 0.4rem;
    border-radius: 0.133rem;
    position: relative;
}
.item .collect-icon {
    background: url() no-repeat 50%;
    background-size: 0.48rem 0.48rem;
    width: 0.667rem;
    height: 0.667rem;
    float: right;
}
.item .top .title {
    font-size: .453rem;
    font-weight: 500;
    color: #000;
    margin-top: 0;
}
.item .top .time{
    margin-bottom: 0.533rem;
    font-size: .373rem;
    font-weight: 400;
    color: #666;
    margin-top: 0.533rem;
}
.item .top .teachers{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    margin-top: 0.267rem;
}
.item .top .time .duration[data-v-9992bdc4] {
    margin-right: 0.533rem;
    position: relative;
}
.item .top .teachers li img{
    width: 0.96rem;
    height: 0.96rem;
    border-radius: 50%;
    vertical-align: middle;
}
.item .top .teachers li span {
    font-size: .4rem;
    color: rgba(0,0,0,.45);
    vertical-align: middle;
    margin-left: 0.4rem;
    display: inline-block;
    width: 3.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item .bottom {
    border-top: 1px solid #f5f5f5;
    margin-top: 0;
    padding-top: 0.267rem;
}
.item .bottom .info .sign {
    font-size: .373rem;
    color: rgba(0,0,0,.45);
    display: inline-block;
    text-align: left;
}
.item .bottom .info .price {
    float: right;
}
.item .bottom .info .price .price-now {
    font-size: .4rem;
    color: #ee1f1f;
    display: inline-block;
}
.item .bottom .info .price .price-now .iconfont {
    color: orange;
}
</style>
